<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-06-25 15:18:25
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-25 17:40:24
 * @FilePath: \nien-vue3-admin\src\views\finance\receiverManame\endFinancial\index.vue
 * @Description: 末端财务详情
-->
<template>
 <div>
    <custom-container ref="customContainerRef" :config="config" />

    <el-dialog v-model="editVisible" title="修改已收金额">
        <el-form :model="formData">
            <el-form-item label="已收金额" prop="recoverAmount" :rules='[{ required: true, message: "请输入修改金额", trigger: "blur" }]'>
              <el-input-number v-model="formData.recoverAmount"  :controls="false"></el-input-number>
            </el-form-item>
        </el-form>
        <template #footer>
          <el-button type="primary" @click="confirm">确定</el-button>
          <el-button type="info" @click="cancel">取消</el-button>
        </template>
    </el-dialog>
 </div>
</template>

<script setup lang="ts" name="EndFinancial">

import { ref, reactive, computed, defineAsyncComponent,watch, onActivated } from 'vue'
import { terminalFinanceDetailsList } from '@/api/finance/receiverManange'
import { ElButton } from "element-plus"
import { useRoute} from 'vue-router'

const editVisible = ref<boolean>(false)
const formData = reactive({
  recoverAmount:undefined,
  id:undefined
})
const confirm = () => {
   
}
const cancel = () => {
   editVisible.value = false
}

const route = useRoute()
const customContainerRef = ref()

const {customerCode,startDate,endDate,status} =  route.query

const queryParams = reactive({
  pageSize: 10,
  pageNum: 1,
  orderNo: undefined,
  startDate,
  mainTransferOrderNo: undefined,
  feeName: undefined,
  waybillNo: undefined,
  timeRange: [startDate, endDate],
  endDate,
  status,
  customerCode,
})

// onActivated(() => {
//    customContainerRef.value.getList()
// })

const config = computed({
  get() {
    return {
      query: {
        fields: [
          {
            label: '订单编号',
            prop: 'orderNo',
          },
          {
            label: '转单号',
            prop: 'mainTransferOrderNo',
          },
          {
            label: '杂费名称',
            prop: 'feeName',
          },
          {
            type:'date-picker',
            label: '订单创建时间',
            prop: 'timeRange',
            option:{
              type:'daterange',
              valueFormat: 'YYYY-MM-DD',
            }
          },
          {
            label: '客户单号',
            prop: 'waybillNo',
          },
        ],
        queryParams,
        formOption: {
          labelWidth: 150
        },
      },
      btns: [],
      table: {
        columns: [
          { label: '客户订单号', align: 'center', prop: 'waybillNo' },
          { label: '转单号', align: 'center', prop: 'mainTransferOrderNo' },
          { label: '客户名称', align: 'center', prop: 'customerName' },
          { label: '成本金额(美元)', align: 'center', prop: 'amount' },
          { label: '应收金额(美元)', align: 'center', prop: 'paymentAmount' },
          { label: '产品名称', align: 'center', prop: 'marketProducts' },
          { label: '收货总实重', align: 'center', prop: 'receivingTotalWeight' },
          { label: '收货总材积', align: 'center', prop: 'receivingTotalWood' },
          { label: '系统订单号', align: 'center', prop: 'orderNo' },
          {
            label: '操作',
            align: 'center',
            width: '320',
            fixed: 'right',
            render(h, {row}) {
              return [
                h(
                  ElButton,
                  {
                    text: true,
                    type: 'primary',
                    onClick: () => {
                    editVisible.value = true;
                    formData.recoverAmount = row.recoverAmount;
                    formData.id = row.id;
                    },
                  },
                  {
                    default: () => '修改已收金额',
                  },
                )]
            },
          },
        ],
        event: {
        },
      },
      api: (p) => {
        const obj = JSON.parse(JSON.stringify(p))
        if ( obj.timeRange?.length) {
          obj.startDate = obj.timeRange[0]
          obj.endDate = obj.timeRange[1]
        }
        delete obj.timeRange
        return terminalFinanceDetailsList(obj)
      },
    }
  },
  set(val) {
    return val
  },
})

</script>